<!-- 创建时间: 2021年06月22日 星期二 15:05 -->
<template>
  <div class="pageOption_container">
    <!-- 标题 -->
    <center>
      <h3>{{ mapperInfo.title }}</h3>
    </center>
    <!-- 操作栏 -->
    <el-row>
      <div class="grid-content bg-purple-dark">
        <el-col :md="12" :sm="12" :xs="15" style="display: flex;">
          <el-tag
            v-if="userType == 'student'"
            type="info"
            style="margin-right:10px;"
            >{{ classNumber }}</el-tag
          >
          <el-tag v-if="userType == 'student'" type="info">{{
            className
          }}</el-tag>
          <!-- :page-count="pageInfo.totalPage" -->
          <el-pagination
            :page-size="pageInfo.pageSize"
            :current-page.sync="pageInfo.currentPage"
            :total="pageInfo.totalPage"
            background
            layout="total, prev, pager, next"
          >
          </el-pagination>
        </el-col>
        <el-col :md="12" :sm="12" :xs="9" style="text-align:right;">
          <el-button type="primary" round @click="addStudentMask = true"
            ><i class="el-icon-plus">添加用户</i>
          </el-button>
        </el-col>
      </div>
    </el-row>
    <!-- Notification 通知 -->
    <el-button plain @click="openInfoTips" style="display: none"></el-button>
    <!-- 遮罩 -->
    <div
      class="mask"
      v-show="addStudentMask"
      @click="addStudentMask = !addStudentMask"
    ></div>

    <!-- ====================学生数据展示区====================== -->
    <div v-if="userType == 'student'">
      <!-- 学生列表  -->
      <el-table
        :data="
          tableData.slice(
            (pageInfo.currentPage - 1) * pageInfo.pageSize,
            pageInfo.currentPage * pageInfo.pageSize
          )
        "
        border
        style="width: 100%"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="studentName" label="姓名" width="180">
          <template scope="scope">
            <span v-show="!scope.row.isEdit">{{ scope.row.studentName }}</span>
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.studentName"
              name="studentName"
              required
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="studentNumber" label="学号" width="180">
          <template scope="scope">
            <span v-show="!scope.row.isEdit">{{
              scope.row.studentNumber
            }}</span>
            <el-input
              v-show="scope.row.isEdit"
              :value="scope.row.studentNumber"
              name="studentNumber"
              required
              clearable
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="studentPass" label="密码" width="180">
          <template scope="scope">
            <span v-show="!scope.row.isEdit">******</span>
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.studentPass"
              name="studentPass"
              required
              clearable
              show-password
              type="password"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="studentEmail" label="邮箱">
          <template scope="scope">
            <span v-show="!scope.row.isEdit">{{ scope.row.studentEmail }}</span>
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.studentEmail"
              name="studentEmail"
              required
              clearable
              type="email"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="
                handleEdit(
                  scope.row,
                  (pageInfo.currentPage - 1) * pageInfo.pageSize + scope.$index
                )
              "
            >
              {{ scope.row.isEdit ? "取消" : "编辑" }}
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="saveEdit(scope.row)"
              v-show="scope.row.isEdit"
            >
              保存
            </el-button>
            <el-popconfirm
              :title="'你确定要删除学生【' + scope.row[mapperInfo.userNameKey] + '】吗？'"
              @confirm="
                delStudents(
                  scope.row,
                  (pageInfo.currentPage - 1) * pageInfo.pageSize + scope.$index
                )
              "
            >
              <el-button type="text" size="small" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <transition name="el-zoom-in-center">
        <el-card class="transition-box" shadow="always" v-show="addStudentMask">
          <el-row style="margin-bottom:12px;">
            <el-col :md="12">
              <el-link
                type="primary"
                :href="$ROOT + '/downloadTemplate?type=student'"
                >下载模板</el-link
              >
              <input
                type="file"
                id="file"
                @change="loadRemoteFile()"
                style="display: none"
              />
              <el-link type="primary" @click.prevent="selectFile"
                >批量添加</el-link
              >
              <el-link type="primary" @click.prevent="selectFileClear"
                >清空</el-link
              >
            </el-col>
            <el-col :md="12" style="text-align:right;">
              <el-tooltip
                class="item"
                effect="dark"
                content="所有操作都需要上传到后端"
                placement="top-end"
              >
                <el-button type="primary" round @click="addStudents"
                  >提交</el-button
                >
              </el-tooltip>
            </el-col>
          </el-row>
          <el-form label-position="right" @submit.native.prevent inline>
            <el-table
              :data="
                formLabelAlign.slice(
                  (excelInfo.currentPage - 1) * excelInfo.pageSize,
                  excelInfo.currentPage * excelInfo.pageSize
                )
              "
              border
              stripe
              style="width: 100%"
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column prop="studentName" label="姓名" width="180">
                <template scope="scope">
                  <el-input
                    v-model="scope.row.studentName"
                    name="studentName"
                    autofocus
                    required
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="studentNumber" label="学号" width="180">
                <template scope="scope">
                  <el-input
                    v-model="scope.row.studentNumber"
                    name="studentNumber"
                    required
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="studentPass" label="初始密码" width="180">
                <template scope="scope">
                  <el-input
                    v-model="scope.row.studentPass"
                    name="studentPass"
                    required
                    disabled
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="studentEmail" label="邮箱" width="180">
                <template scope="scope">
                  <el-input
                    v-model="scope.row.studentEmail"
                    type="email"
                    name="studentEmail"
                    required
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      managerList(
                        (excelInfo.currentPage - 1) * excelInfo.pageSize +
                          scope.$index,
                        'cle'
                      )
                    "
                    >清空
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      managerList(
                        (excelInfo.currentPage - 1) * excelInfo.pageSize +
                          scope.$index,
                        'del'
                      )
                    "
                    >清除
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      managerList(
                        (excelInfo.currentPage - 1) * excelInfo.pageSize +
                          scope.$index,
                        'add'
                      )
                    "
                    >添加
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-input
              type="submit"
              id="submit"
              style="display: none"
            ></el-input>
          </el-form>
          <el-pagination
            style="display: flex; justify-content: center;"
            :page-size="excelInfo.pageSize"
            :current-page.sync="excelInfo.currentPage"
            :total="excelInfo.totalPage"
            background
            hide-on-single-page
            layout="prev, pager, next"
          >
          </el-pagination>
        </el-card>
      </transition>
    </div>

    <!-- ====================教师数据展示区====================== -->
    <div v-if="userType == 'teacher'">
      <el-table
        v-if="userType == 'teacher'"
        :data="
          tableData.slice(
            (pageInfo.currentPage - 1) * pageInfo.pageSize,
            pageInfo.currentPage * pageInfo.pageSize
          )
        "
        border
        style="width: 100%"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="teacherName" label="姓名" width="180">
          <template scope="scope">
            <span v-show="!scope.row.isEdit">{{ scope.row.teacherName }}</span>
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.teacherName"
              name="teacherName"
              required
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="teacherNumber" label="工号" width="180">
          <template scope="scope">
            <span v-show="!scope.row.isEdit">{{
              scope.row.teacherNumber
            }}</span>
            <el-input
              v-show="scope.row.isEdit"
              :value="scope.row.teacherNumber"
              name="teacherNumber"
              required
              clearable
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="teacherPass" label="密码" width="180">
          <template scope="scope">
            <span v-show="!scope.row.isEdit">******</span>
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.teacherPass"
              name="teacherPass"
              required
              clearable
              show-password
              type="password"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="teacherEmail" label="邮箱">
          <template scope="scope">
            <span v-show="!scope.row.isEdit">{{ scope.row.teacherEmail }}</span>
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.teacherEmail"
              name="teacherEmail"
              required
              clearable
              type="email"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="
                handleEdit(
                  scope.row,
                  (pageInfo.currentPage - 1) * pageInfo.pageSize + scope.$index
                )
              "
            >
              {{ scope.row.isEdit ? "取消" : "编辑" }}
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="saveEdit(scope.row)"
              v-show="scope.row.isEdit"
            >
              保存
            </el-button>
            <el-popconfirm
              :title="'你确定要删除教师【' + scope.row[mapperInfo.userNameKey] + '】吗？'"
              @confirm="
                delStudents(
                  scope.row,
                  (pageInfo.currentPage - 1) * pageInfo.pageSize + scope.$index
                )
              "
            >
              <el-button type="text" size="small" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <transition name="el-zoom-in-center">
        <el-card class="transition-box" shadow="always" v-show="addStudentMask">
          <el-row style="margin-bottom:12px;">
            <el-col :md="12">
              <el-link
                type="primary"
                :href="$ROOT + '/downloadTemplate?type=teacher'"
                >下载模板</el-link
              >
              <input
                type="file"
                id="file"
                @change="loadRemoteFile()"
                style="display: none"
              />
              <el-link type="primary" @click.prevent="selectFile"
                >批量添加</el-link
              >
              <el-link type="primary" @click.prevent="selectFileClear"
                >清空</el-link
              >
            </el-col>
            <el-col :md="12" style="text-align:right;">
              <el-tooltip
                class="item"
                effect="dark"
                content="所有操作都需要上传到后端"
                placement="top-end"
              >
                <el-button type="primary" round @click="addStudents"
                  >提交</el-button
                >
              </el-tooltip>
            </el-col>
          </el-row>
          <el-form label-position="right" @submit.native.prevent inline>
            <el-table
              :data="
                formLabelAlign.slice(
                  (excelInfo.currentPage - 1) * excelInfo.pageSize,
                  excelInfo.currentPage * excelInfo.pageSize
                )
              "
              border
              stripe
              style="width: 100%"
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column prop="teacherName" label="姓名" width="180">
                <template scope="scope">
                  <el-input
                    v-model="scope.row.teacherName"
                    name="teacherName"
                    autofocus
                    required
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="teacherNumber" label="工号" width="180">
                <template scope="scope">
                  <el-input
                    v-model="scope.row.teacherNumber"
                    name="teacherNumber"
                    required
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="teacherPass" label="初始密码" width="180">
                <template scope="scope">
                  <el-input
                    v-model="scope.row.teacherPass"
                    name="teacherPass"
                    required
                    disabled
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="teacherEmail" label="邮箱" width="180">
                <template scope="scope">
                  <el-input
                    v-model="scope.row.teacherEmail"
                    type="email"
                    name="teacherEmail"
                    required
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      managerList(
                        (excelInfo.currentPage - 1) * excelInfo.pageSize +
                          scope.$index,
                        'cle'
                      )
                    "
                    >清空
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      managerList(
                        (excelInfo.currentPage - 1) * excelInfo.pageSize +
                          scope.$index,
                        'del'
                      )
                    "
                    >清除
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      managerList(
                        (excelInfo.currentPage - 1) * excelInfo.pageSize +
                          scope.$index,
                        'add'
                      )
                    "
                    >添加
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-input
              type="submit"
              id="submit"
              style="display: none"
            ></el-input>
          </el-form>
          <el-pagination
            style="display: flex; justify-content: center;"
            :page-size="excelInfo.pageSize"
            :current-page.sync="excelInfo.currentPage"
            :total="excelInfo.totalPage"
            background
            hide-on-single-page
            layout="prev, pager, next"
          >
          </el-pagination>
        </el-card>
      </transition>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["userType"],
  data() {
    //这里存放数据
    return {
      mapperInfo: {
        title: "",
        userNameKey: "",
        userNumberKey: "",
        userPassKey: "",
        userEmailKey: "",
        requestBody: {
          tableName:'',
        },
      },
      // 页面分页
      pageInfo: {
        currentPage: 1,
        pageSize: 20,
        totalPage: 0,
      },
      // excel添加信息时分页
      excelInfo: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
      },
      // 状态为学生时独有
      classNumber: this.$route.query[0], // 班级号
      className: this.$route.query[1], // 班级名称
      // 信息存储
      tableData: [], // 总列表信息
      tempTableDate: {}, // 临时保存编辑中的表原数据
      addStudentMask: false, // 添加遮罩
      formLabelAlign: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    "pageInfo.currentPage":function(val){
        this.autoGetUserList();
    }
  },
  //方法集合
  methods: {
    pageInit() {
      if (this.userType == "teacher") {
        this.mapperInfo = {
          title: "教师管理",
          userNameKey: "teacherName",
          userNumberKey: "teacherNumber",
          userPassKey: "teacherPass",
          userEmailKey: "teacherEmail",
          requestBody: {
            tableName: 'teacher',
          },
        };
        this.formLabelAlign = [{
          teacherName: "",
          teacherNumber: "",
          teacherPass: "123456",
          teacherEmail: "",
          isEdit: false,
        }];
      } else if (this.userType == "student") {
        this.mapperInfo = {
          title: "学生管理",
          userNameKey: "studentName",
          userNumberKey: "studentNumber",
          userPassKey: "studentPass",
          userEmailKey: "studentEmail",
          requestBody: {
            tableName: this.classNumber,
          },
        };
        this.formLabelAlign = [{
          studentName: "",
          studentNumber: "",
          studentPass: "123456",
          studentEmail: "",
          isEdit: false,
        }];
      }
    },
    // 编辑数据项状态转换
    handleEdit(row, index) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (i == index) continue;
        this.tableData[i].isEdit = false;
      }
      row.isEdit = !row.isEdit;
      if (row.isEdit) {
        this.tempTableDate = JSON.stringify(row);
      } else {
        let tempTableDate = JSON.parse(this.tempTableDate);
        row = tempTableDate;
        row.isEdit = false;
        this.tempTableDate = "";
      }
      this.$forceUpdate();
    },
    /**
     * body:
endRow: 20
firstPage: 1
hasNextPage: true
hasPreviousPage: false
isFirstPage: true
isLastPage: false
lastPage: 8
list: (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
navigateFirstPage: 1
navigateLastPage: 8
navigatePages: 8
navigatepageNums: (8) [1, 2, 3, 4, 5, 6, 7, 8]
nextPage: 2
pageNum: 1
pageSize: 20
pages: 10
prePage: 0
size: 20
startRow: 1
total: 200
     */
    // 自动获取班级学生信息
    autoGetUserList() {
      let loading = this.$loading({
        lock: true,
        text: "数据加载中,请稍等...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$http
        .post("queryUsers", {
          classNumber: this.mapperInfo.requestBody.tableName,
          pageNum: this.pageInfo.currentPage,
          pageSize: this.pageInfo.pageSize
        })
        .then((res) => {
          loading.close();
          if (res.bodyText == "") {
            this.$message({
              message: "数据信息获取失败",
              type: "error",
            });
            return;
          }
          let start = (res.body.pageNum-1)*res.body.pageSize, end = res.body.pageNum*res.body.pageSize > res.body.total?res.body.total:res.body.pageNum*res.body.pageSize;
          for(let i = start, j = 0 ; i < end ; i++){
              this.tableData[i] = res.body.list[j++];
              this.tableData[i]['isEdit'] = false;
          }
          this.pageInfo.totalPage = res.body.total;
          this.$forceUpdate();
        }).catch(err=>{
          loading.close();
          this.$message({
              message: err.status+" 服务器访问出错了。。。",
              type: "error",
            });
        });
    },

    // 保存修改学生信息
    saveEdit(row) {
      Object.keys(row).forEach((val) => {
        if (val == "") {
          this.openInfoTips("温馨提示", "用户信息有误", "info", 4000);
          return;
        }
      });
      let arr = new Array();
      arr.push(row);
      let loading = this.$loading({
        lock: true,
        text: "数据加提交中,请稍等...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$http
        .post("upUsers", {
          classNumber: this.mapperInfo.requestBody.tableName,
          data: JSON.stringify(arr),
        })
        .then((res) => {
          if (res.body != -1 && res.body == arr.length) {
            row.isEdit = false;
            this.openInfoTips(
              "更新",
              "用户【" +
                row[this.mapperInfo.userNameKey] +
                "】信息<b style='color:green;'>更新成功</b>",
              "success",
              4000
            );
          } else {
            this.openInfoTips(
              "更新",
              "用户信息<b style='color:red;'>更新失败</b>",
              "error",
              4000
            );
          }
          loading.close();
        }).catch(err=>{
          loading.close();
          this.$message({
              message: err.status+" 服务器访问出错了。。。",
              type: "error",
            });
        });
    },
    // 删除学生信息
    delStudents(row, index) {
      let arr = new Array();
      let key = this.mapperInfo.userNumberKey;
      arr.push(row[key]);
      let loading = this.$loading({
        lock: true,
        text: "数据加提交中,请稍等...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$http
        .post("delUsers", {
          classNumber: this.mapperInfo.requestBody.tableName,
          studentNumber: JSON.stringify(arr),
        })
        .then((res) => {
          if (res.body != -1 && res.body == arr.length) {
            this.tableData.splice(index, 1);
            this.openInfoTips(
              "删除",
              "【" +
                res.body +
                "】位用户信息<b style='color:green;'>删除成功</b>",
              "success",
              4000
            );
          } else {
            this.openInfoTips(
              "删除",
              "用户信息<b style='color:red;'>删除失败</b>",
              "error",
              4000
            );
          }
          loading.close();
        }).catch(err=>{
          loading.close();
          this.$message({
              message: err.status+" 服务器访问出错了。。。",
              type: "error",
            });
        });
    },
    // 将添加学生信息
    addStudents() {
      let loading = this.$loading({
        lock: true,
        text: "数据加提交中,请稍等...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (
        this.formLabelAlign.length != 0 &&
        this.checkFormLabelAlignIsExistsNull()
      ) {
        this.$http
          .post("addUsers", {
            classNumber: this.mapperInfo.requestBody.tableName,
            updateArr: JSON.stringify(this.formLabelAlign),
          })
          .then((res) => {
            loading.close();
            if (res.body != -1 && res.body == this.formLabelAlign.length) {
              this.tableData = this.tableData.concat(this.formLabelAlign);
              this.addStudentMask = false;
              this.selectFileClear();
              this.openInfoTips(
                "添加",
                "【" +
                  res.body +
                  "】位用户信息<b style='color:green;'>添加成功</b>",
                "success",
                4000
              );
            } else {
              this.openInfoTips(
                "添加",
                "用户信息<b style='color:red;'>添加失败</b>",
                "error",
                4000
              );
            }
          }).catch(err=>{
          loading.close();
          this.$message({
              message: err.status+" 服务器访问出错了。。。",
              type: "error",
            });
        });
      } else {
        loading.close();
        this.openInfoTips("温馨提示", "用户信息有误", "info", 4000);
      }
    },
    checkFormLabelAlignIsExistsNull() {
      let arr = this.formLabelAlign;
      for (let i = 0; i < arr.length; i++) {
        if (
          arr[i][this.mapperInfo.userNameKey] == "" ||
          arr[i][this.mapperInfo.userNumberKey] == "" ||
          arr[i][this.mapperInfo.userPassKey] == "" ||
          arr[i][this.mapperInfo.userEmailKey] == ""
        )
          return false;
      }
      return true;
    },
    // 在添加学生信息栏内 增加空白学生列表
    managerList(index, options) {
      /**
       * 语法 array.splice(index,howmany,item1,.....,itemX)
       * index 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
       * howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
       * item1, ..., itemX 可选。要添加到数组的新元素
       * Type 描述
       * Array 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
       */

      switch (options) {
        case "add":
          if (this.userType == "student") {
            this.formLabelAlign.splice(index + 1, 0, {
              studentName: "",
              studentNumber: "",
              studentPass: "123456",
              studentEmail: "",
              isEdit: true,
            });
          } else if (this.userType == "teacher") {
            this.formLabelAlign.splice(index + 1, 0, {
              teacherName: "",
              teacherNumber: "",
              teacherPass: "123456",
              teacherEmail: "",
              isEdit: true,
            });
          }
          break;
        case "del":
          if (this.formLabelAlign.length != 1) {
            this.formLabelAlign.splice(index, 1);
            this.excelInfo.totalPage -= 1;
          }
          break;
        case "cle":
          Object.keys(this.formLabelAlign[index]).forEach((item) => {
            if (item != this.mapperInfo.userPassKey)
              this.formLabelAlign[index][item] = "";
            else this.formLabelAlign[index][item] = "123456";
          });
          break;
        default:
          break;
      }
    },
    // 清空所有学生导入
    selectFileClear() {
      document.getElementById("file").value = "";
      if (this.userType == "student") {
        this.formLabelAlign = [{
          studentName: "",
          studentNumber: "",
          studentPass: "123456",
          studentEmail: "",
          isEdit: true,
        }];
      } else if (this.userType == "teacher") {
        this.formLabelAlign = [{
          teacherName: "",
          teacherNumber: "",
          teacherPass: "123456",
          teacherEmail: "",
          isEdit: true,
        }];
      }
      this.excelInfo = {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
      };
    },
    // 批量导入文件
    selectFile() {
      document.getElementById("file").click();
    },
    loadRemoteFile() {
      let loading = this.$loading({
        lock: true,
        text: "数据加载中,请稍等...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        let url = document.getElementById("file");
        let _this = this;
        this.readWorkbookFromLocalFile(url.files[0], function(workbook) {
          _this.outputWorkbook(workbook);
          loading.close();
        });
      }, 100);
    },
    readWorkbookFromLocalFile(file, callback) {
      var reader = new FileReader();
      let _this = this;
      reader.onload = function(e) {
        var data = e.target.result;
        var workbook = _this.$XLSX.read(data, { type: "binary" });
        if (callback) callback(workbook);
      };
      reader.readAsBinaryString(file);
    },
    outputWorkbook(workbook) {
      let sheetNames = workbook.SheetNames; // 工作表名称集合
      let _this = this;
      sheetNames.forEach((name) => {
        let worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
        let csv = _this.$XLSX.utils.sheet_to_csv(worksheet);
        let rows = csv.split("\n");
        rows.splice(0, 1); //删除第一行 表头行
        rows.pop(); //删除最后一行 空白数据行
        rows.forEach(function(value, index) {
          let row = value.split(",");
          if (row[0] != "" && row[1] != "" && row[2] != "" && row[3] != "") {
            if (_this.userType == "student") {
              _this.formLabelAlign.push({
                studentName: row[0],
                studentNumber: row[1],
                studentPass: row[2],
                studentEmail: row[3],
                isEdit: false,
              });
            } else if (_this.userType == "teacher") {
              _this.formLabelAlign.push({
                teacherName: row[0],
                teacherNumber: row[1],
                teacherPass: row[2],
                teacherEmail: row[3],
                isEdit: false,
              });
            }
          }
        });
        this.excelInfo.totalPage = this.formLabelAlign.length;
      });
      document.getElementById("file").value = "";
    },
    // 弹出框
    openInfoTips(title, message, type, duration) {
      this.$notify({
        title: title,
        message: message,
        type: type,
        duration: duration,
        dangerouslyUseHTMLString: true,
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.pageInit();
    this.autoGetUserList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //当data中定义的数据有变化时就会加载updated方法
  updated() {},
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.pageOption_container {
  margin-bottom: 15px;
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 10px 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }

  .mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
  }
  .transition-box {
    width: 980px;
    height: 500px;
    background: #fff;
    z-index: 101;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: auto;
  }
}
</style>
